<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米登录</title>
    <link rel="stylesheet" href="css/style06.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="images/mi-logo.png" alt="">
        </div>
        <div class="title">
            <h1>小米商城</h1>
            <p>让每个人都能享受科技的乐趣</p>
        </div>
    </div>
    <div class="content">
        <div class="box">
            <ul id="tab">
                <li class="current">账号登录</li>
                <span>|</span>
                <li>扫码登录</li>
            </ul>
            <div id="tab-content">
                <div>
                    <p class="phone">
                        <input type="text" placeholder="邮箱/手机号/小米账号">
                    </p>
                    <p class="password">
                        <input type="password" placeholder="密码">
                    </p>
                    <p>
                        <button class="but">立即登录</button>
                    </p>
                    <div class="register">
                        <span>注册小米账号</span>
                        <span>|</span>
                        <span>忘记密码？</span>
                    </div>
                    <div class="footer">
                        <p class="other">
                            <span class="left"></span>
                            其他方式登录
                            <span class="right"></span>
                        </p>
                        <div class="all-icons">
                            <a href="#"><span class="qq"></span></a>
                            <a href="#"><span class="weibo"></span></a>
                            <a href="#"><span class="pay"></span></a>
                            <a href="#"><span class="weixin"></span></a>
                        </div>
                    </div>
                </div>
                <div>
                    <img src="images/sao.png" alt="" class="img1">
                    <p class="word">使用 <a href="#">小米商城APP</a> 扫一扫</p>
                    <p class="word">小米手机可打开「设置」>「小米帐号」扫码登录</p>
                </div>
            </div>
        </div>

    </div>
    <div class="nav">
        <p>简体&emsp;|&emsp; 繁体&emsp;|&emsp; English&emsp;| &emsp;常见问题&emsp;|&emsp;隐私政策</p>
        <p>小米公司版权所有-京ICP备10046444-<img src="images/警徽.png">京公网安备11010802020134号-京ICP证110507号</p>
    </div>
    <script>
        var $lis = $("#tab>li");
        for (var i = 0; i < $lis.length; i++) {
            $lis[i].index = i;
        }
        $lis.click(function () {
            $(this).addClass("current").siblings().removeClass("current");
            $("#tab-content").children().hide().eq(this.index).show();
        })
    </script>
</body>

</html>